@import 'card';
@import 'panel';
@import 'toc';
@import 'taxonomy';
@import 'reward';

.post-title {
  color: var(--#{$prefix}surface-color);
}

.post-meta {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  word-break: break-all;

  > span {
    &:not(:last-child) {
      margin-right: 0.125rem;

      &::after {
        content: '·';
        margin-left: 0.125rem;
      }
    }
  }
}

.post-content {
  color: var(--#{$prefix}surface-color);

  h3 {
    margin-top: 2rem;
  }

  h6,
  .h6,
  h5,
  .h5,
  h4,
  .h4,
  h3,
  .h3,
  h2,
  .h2,
  h1,
  .h1 {
    margin-bottom: 1rem;

    &:hover {
      .anchor::after { /* stylelint-disable-line */
        content: '§'; /* stylelint-disable-line */
      }
    }
  }

  h2:not(:first-child) {
    margin-top: 3rem;
  }

  ol,
  ul {
    li {
      margin-bottom: 0.25rem;
    }
  }

  .alert {
    p:first-of-type {
      display: inline;
    }
  }
}

.post-content,
.post-summary {
  a {
    &:not(.btn) {
      color: var(--#{$prefix}primary);

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

@if $numberifyHeadings {
  .post-content {
    counter-reset: h2Counter;

    @for $heading from 2 through $numberifyHeadingsEndLevel {
      h#{$heading}[data-numberify] {
        @if $heading < $numberifyHeadingsEndLevel {
          counter-reset: h#{$heading + 1}Counter; /* stylelint-disable-line */
        }

        &::before {
          display: inline;
          counter-increment: h#{$heading}Counter;

          @if $heading == 2 {
            content: counter(h2Counter) $numberifyHeadingsSeparator;
          } @else if $heading == 3 {
            content: counter(h2Counter) '.' counter(h3Counter) $numberifyHeadingsSeparator;
          } @else if $heading == 4 {
            content:
              counter(h2Counter) '.'
              counter(h3Counter) '.'
              counter(h4Counter) $numberifyHeadingsSeparator;
          } @else if $heading == 5 {
            content:
              counter(h2Counter) '.'
              counter(h3Counter) '.'
              counter(h4Counter) '.'
              counter(h5Counter)
              $numberifyHeadingsSeparator;
          } @else if $heading == 6 {
            content:
              counter(h2Counter) '.'
              counter(h3Counter) '.'
              counter(h4Counter) '.'
              counter(h5Counter) '.'
              counter(h6Counter) $numberifyHeadingsSeparator;
          }
        }
      }
    }
  }
}

.post-navs {
  flex-wrap: wrap;
}

.post-nav {
  margin: 0.25rem;
  display: flex;
  align-items: center;
}

.post-comments {
  .utterances {
    max-width: 100%;
  }
}

.posts {
  .post {
    img {
      float: left;
      margin-right: 1rem;
      width: 180px;
      height: auto;
      padding-bottom: 0.125rem;
      max-height: 180px;
      object-fit: cover;
    }

    @include media-breakpoint-down(sm) {
      img {
        width: 100%;
        margin-bottom: 0.5rem;
      }
    }
  }
}

.post-featured-img {
  object-fit: contain;
}

.post-pinned-icon {
  margin-left: -0.5rem;
}

#post-content-body {
  overflow: hidden;
}
